<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示左下角商标图片的更改
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;

  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
    // 天空盒效果  这里的图片是cesium 默认给的图片
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: Cesium.buildModuleUrl(
          "Assets/Textures/SkyBox/tycho2t3_80_px.jpg"
        ),
        negativeX: Cesium.buildModuleUrl(
          "Assets/Textures/SkyBox/tycho2t3_80_mx.jpg"
        ),
        positiveY: Cesium.buildModuleUrl(
          "Assets/Textures/SkyBox/tycho2t3_80_py.jpg"
        ),
        negativeY: Cesium.buildModuleUrl(
          "Assets/Textures/SkyBox/tycho2t3_80_mx.jpg"
        ),
        positiveZ: Cesium.buildModuleUrl(
          "Assets/Textures/SkyBox/tycho2t3_80_pz.jpg"
        ),
        negativeZ: Cesium.buildModuleUrl(
          "Assets/Textures/SkyBox/tycho2t3_80_mz.jpg"
        ),
      },
    }),
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";

  /** ----- 左下角商标图片 -----*/ 
  const viewportQuad = new Cesium.ViewportQuad(
    new Cesium.BoundingRectangle(10, 10, 80, 40) // 屏幕坐标，宽高， 单位px
  );
  // viewportQuad.material.uniforms.color = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
  // 渲染一张logo
  viewportQuad.material = new Cesium.Material({
      fabric: {
        type: "Image",
        uniforms: {
          color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
          image: Cesium.buildModuleUrl("Assets/Images/bing_maps_credit.png"),
        },
      },
    });
  //   
  viewer.scene.primitives.add(viewportQuad);
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
